<template>
	<view>
		<view class="hm-header-xian"></view>
		<!-- 用户信息 -->
		<view class="user">
			<image class="avatar" :src="isLogin?userInfo.avatar.url:applet.domain + '/addons/pt/applet/default-avatar.jpg'" />
			<view v-if="isLogin">
				<view class="name" @click="goTo('user/detail/index')">
					{{userInfo.phone}}
					<view class="setting">
						<u-icon color="#c0c4cc" size="24" name="setting"></u-icon>
					</view>
				</view>
			</view>
			<view v-else>
				<view class="name" @click="doLogin">
					注册/登录
					<view class="hm-dis-block-inline">
						<u-icon color="#303133" name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 会员卡 -->
		<view class="hm-bg-f hm-p-lr-20" v-if="isLogin && userInfo.v.grade.is_open==1">
			<view class="vip">
				<view class="icon">
					<u-icon color="#fcbd71" bold size="20" name="level"></u-icon>
				</view>
				<view v-if="userInfo.v.value">
					VIP{{userInfo.v.grade.vip[userInfo.v.value-1].name}}
					<view class="but">
						<u-button @click="goTo('user/vip/index')" icon="play-right-fill" type="info" size="mini"
							text="会员中心"></u-button>
					</view>
				</view>
				<view v-else>
					开通会员卡，各种优惠享不停
					<view class="but">
						<u-button @click="goTo('user/vip/open?action=vip')" icon="play-right-fill" type="info"
							size="mini" text="立即开通"></u-button>
					</view>
				</view>
			</view>
		</view>
		<!-- 我的资产 -->
		<view class="hm-p-lr-20 hm-m-t-20">
			<view class="navbar">
				<view class="hm-p-b-20 hm-col-0 hm-font-30 hm-font-b">我的资产</view>
				<u-grid :border="false" col="3">
					<u-grid-item @click="goTo('user/integral/index')">
						<view class="col3">
							<view class="hm-dis-block-inline">
								<image :src="applet.domain + '/addons/pt/applet/user/integral.png'"></image>
								<view class="title">积分</view>
							</view>
							<view v-if="isLogin" class="hm-m-t-5">
								<text class="hm-col-error hm-font-b hm-font-26">{{userInfo.score}}个</text>
								<text class="hm-col-tips hm-font-22 hm-m-l-10">未使用</text>
							</view>
							<view v-else class="hm-col-tips hm-font-22 hm-m-t-5"> 查看积分</view>
						</view>
					</u-grid-item>
					<u-grid-item @click="goTo('user/coupon/index')">
						<view class="col3">
						<view class="hm-dis-block-inline">
							<image :src="applet.domain + '/addons/pt/applet/user/coupon.png'"></image>
							<view class="title">优惠券</view>
						</view>
						<view v-if="isLogin" class="hm-m-t-5">
							<text class="hm-col-error hm-font-b hm-font-26">{{couponCount.all}}个</text>
							<text class="hm-col-tips hm-font-22 hm-m-l-10">未使用</text>
						</view>
						<view v-else class="hm-col-tips hm-font-22 hm-m-t-5"> 查看优惠券</view>
						</view>
					</u-grid-item>
					<u-grid-item @click="goTo('user/wallet/index')">
						<view class="col3">
						<view class="hm-dis-block-inline">
							<image :src="applet.domain + '/addons/pt/applet/user/payment.png'"></image>
							<view class="title">余额</view>
						</view>
						<view v-if="isLogin" class="hm-m-t-5">
							<text class="hm-col-error hm-font-b hm-font-26">￥{{userInfo.money}}</text>
							<text class="hm-col-tips hm-font-22 hm-m-l-10">未使用</text>
						</view>
						<view v-else class="hm-col-tips hm-font-22 hm-m-t-5"> 查看余额</view>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<!-- 我的功能 -->
		<view class="hm-p-lr-20 hm-m-t-20">
			<view class="navbar">
				<view class="hm-p-b-20 hm-col-0 hm-font-30 hm-font-b">我的功能</view>
				<view class="list" @click="goTo('user/wallet/index')">
					<image :src="applet.domain + '/addons/pt/applet/user/payment.png'"></image>
					充值有礼
					<div class="arrow-right">
						<u-icon name="arrow-right" color="#c8c9cc"></u-icon>
					</div>
				</view>
				<view class="list" @click="goTo('user/sign/index')">
					<image :src="applet.domain + '/addons/pt/applet/user/sign.png'"></image>
					积分签到
					<div class="arrow-right">
						<u-icon name="arrow-right" color="#c8c9cc"></u-icon>
					</div>
				</view>
				<view class="list" @click="goTo('user/address/index')">
					<image :src="applet.domain + '/addons/pt/applet/user/address.png'"></image>
					我的地址
					<div class="arrow-right">
						<u-icon name="arrow-right" color="#c8c9cc"></u-icon>
					</div>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<button open-type="contact" class="hm-btn-normal">
				<view class="list">
					<image :src="applet.domain + '/addons/pt/applet/user/service.png'"></image>
					联系客服
					<div class="arrow-right">
						<u-icon name="arrow-right" color="#c8c9cc"></u-icon>
					</div>
				</view>
				</button>
				<button open-type="openSetting" class="hm-btn-normal">
				<view class="list">
					<image :src="applet.domain + '/addons/pt/applet/user/setting.png'"></image>
					权限设置
					<div class="arrow-right">
						<u-icon name="arrow-right" color="#c8c9cc"></u-icon>
					</div>
				</view>
				</button>
				<!-- #endif -->
			</view>
		</view>
		<!--技术支持 -->
		<view class="hm">
			{{applet.copyright}} <text class="v">V{{applet.version}}</text>
		</view>
		<u-popup :show="login" round="8" mode="center" closeable @close="login = false">
			<view class="user-login">
				<view class="icons">
					<!-- #ifdef MP-ALIPAY -->
					<image :src="applet.domain + '/addons/pt/applet/user/alipay.png'"></image>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<image :src="applet.domain + '/addons/pt/applet/user/wechat.png'"></image>
					<!-- #endif -->
				</view>
				<view class="hm-font-26 hm-col-tips hm-p-t-20">登录后体验更好的服务</view>
				<view class="hm-p-t-50">
					<view class="hm-p-lr-b25">
					<!-- #ifdef MP-WEIXIN -->
						<u-button type="success" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
							text="授权登录"></u-button>
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<button
					  open-type="getAuthorize"
					  scope="phoneNumber"
					  @getAuthorize="getPhoneNumber"
					  type="primary"
					>
					  授权登录
					</button>
					<!-- #endif -->
					</view>
					<view class="hm-p-t-20 hm-col-tips hm-font-26">
						<text @click="login = false">暂不登录</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	const App = getApp();
	import config from '@/config.js';
	export default {
		data() {
			return {
				applet: {domain:config.domain},
				isLogin: false, //登录状态
				login: false, //是否显示登录框
				userInfo: {
					avatar: {
						url: ''
					},
					v: {
						value: 0
					}
				},
				orderCount: null,
				couponCount:null,
			};
		},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		async onShow() {
			let _this = this;
			//#ifndef H5
			await _this.$onLaunched;
			//#endif
			_this.login = false;
			_this.applet = App.getApplet();
			_this.isLogin = App.checkIsLogin();
			if (_this.isLogin) {
				// 获取当前用户信息
				_this.getUserDetail();
				_this.getIndex();
			}
		},

		methods: {
			/**
			 * 一键授权登录
			 */
			getPhoneNumber: function(e) {
				let _this = this;
				// #ifdef MP-ALIPAY
				my.getPhoneNumber({
					success: (res) => {
						let rs = JSON.parse(res.response);
						_this.login = false;
						if(rs.response.code){
							App.showError('错误代码：'+rs.response.subCode+'错误信息：'+rs.response.subMsg);
							return false;
						}
						App.getPhoneNumber(rs, (msg) => {
							_this.isLogin = App.checkIsLogin();
							if (_this.isLogin) {
								_this.getUserDetail();
								App.showSuccess(msg);
							}
						});
					}
				});
				// #endif
				// #ifdef MP-WEIXIN
				App.getPhoneNumber(e, (msg) => {
					_this.login = false;
					_this.isLogin = true;
					_this.isLogin = App.checkIsLogin();
					if (_this.isLogin) {
						_this.getUserDetail();
						App.showSuccess(msg);
					}
				});
				// #endif
			},

			/**
			 * 拨打电话
			 */
			phone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			/**
			 * 获取用户中心信息
			 */
			getIndex() {
				let _this = this;
				App._get('user.index/index', {}, result => {
					_this.orderCount = result.data.orderCount;
					_this.couponCount = result.data.couponCount;
				});
			},
			/**
			 * 获取当前用户信息
			 */
			getUserDetail() {
				let _this = this;
				App._get('user/detail', {}, result => {
					_this.userInfo = result.data;
				});
			},
			
			/**
			 * 登录操作
			 */
			doLogin(){
				let _this = this;
				//#ifdef MP-WEIXIN || MP-ALIPAY
				_this.login = true;
				//#endif
				//#ifdef H5
				App.goTo('login/index'); // 转跳指定的页面
				//#endif
			},

			/**
			 * 菜单列表导航跳转
			 */
			goTo(url,is_login=true) {
				let _this = this;
				if (is_login && !_this.onCheckLogin()) {
					return false;
				}
				App.goTo(url); // 转跳指定的页面
			},

			/**
			 * 验证是否已登录
			 */
			onCheckLogin() {
				let _this = this;
				if (!_this.isLogin) {
					App.showError('很抱歉，您还没有登录');
					return false;
				}
				return true;
			}
		}
	};
</script>
<style lang="scss" scoped>
	.user {
		height: 100rpx;
		padding: 20rpx 40px;
		background-color: #fff;
		.avatar {
			width: 100rpx;
			height: 100rpx;
			float: left;
			margin-right: 20rpx;
			border-radius: 50%;
		}
	
		.name {
			font-size: 30rpx;
			font-weight: 600;
			line-height: 100rpx;
			color: #303133;
	
			.setting {
				float: right;
				margin-top: 28rpx;
				display: inline-block;
			}
		}
	}
	
	.vip {
		padding: 15rpx 40rpx;
		height: 50rpx;
		line-height: 50rpx;
		background-color: #303133;
		font-size: 24rpx;
		color: #fff;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		.icon {
			display: inline-block;
			float: left;
			margin-top: 8rpx;
			margin-right: 5rpx;
		}
		.but {
			display: inline-block;
			float: right;
			margin-top: 6rpx;
		}
	}

	.navbar {
		background-color: #fff;
		border-radius: 15rpx;
		padding: 20rpx;
		.col3{
			width: 100%;
			text-align: center;
			padding-bottom: 20rpx;
			image {
				height: 50rpx;
				width: 50rpx;
				float: left;
			}
			.title{
				display: inline-block;
				line-height: 50rpx;
			}
		}
		.col4{
			width: 100%;
			text-align: center;
			padding-bottom: 20rpx;
			image {
				height: 40rpx;
				width: 40rpx;
			}
		}
		.list{
			padding: 20rpx 30rpx;
			border-bottom: 1rpx solid #f3f4f6;
			image{
				width: 35rpx;
				height: 35rpx;
				margin-right: 10rpx;
				float: left;
				margin-top: 5rpx;
			}
			.arrow-right{
				display: inline-block;
				margin-top: 5rpx;
				float: right;
			}
		}
	}

	.menu {
		border-radius: 15rpx;
		padding: 0 20rpx 30rpx 20rpx;
		background-color: #fff;
	}

	.user-login{
		width: 500rpx;
		padding-bottom: 20rpx;
		text-align: center;
		.icons{
			margin-top: -50rpx;
			image{
				width: 100rpx;
				height: 100rpx;
			}
		}
	}
</style>